<template>
	<div class="container">
		<div class="title">自动派单</div>
		<div class="auto_main">
			<div class="auto_center" style="margin-bottom: 70px;">
				<div class="select_box">
					<div class="select_show">
						<el-checkbox :value="cvalue" @change="changeauto"></el-checkbox>
						<router-link to="/workTimeRange">工作时间</router-link>
					</div>
				</div>
				<img src="@assets/images/nex.png" class="next" alt="">

				<div class="type_box">
					<div :class="act==1?'act type_li':'type_li'" @click="change(1)"><img v-if="act == 1"
							src="@assets/images/xuaz.png" alt="">按故障类型</div>
					<div :class="act==2?'act type_li':'type_li'" @click="change(2)"><img v-if="act == 2"
							src="@assets/images/xuaz.png" alt="">按部门</div>

					<div :class="act==4?'act type_li':'type_li'" @click="change(4)"><img v-if="act == 4"
							src="@assets/images/xuaz.png" alt="">按网段</div>
				</div>

				<img src="@assets/images/nex.png" class="next" alt="">

				<div class="curss" v-if="act == 1">故障类型负责人</div>
				<div class="curss" v-if="act == 2">部门负责人</div>
				<div class="curss" v-if="act == 4">网段负责人</div>
			</div>
			<div class="auto_center">
				<div class="select_box">
					<div class="select_show">
						<el-checkbox :value="cvalue2" @change="changeauto2"></el-checkbox>
						<!-- <div>非工作时间</div> -->
						<router-link to="/workTimeRange">非工作时间</router-link>
					</div>
				</div>
				<img src="@assets/images/nex.png" class="next" alt="">

				<div class="type_box">
					<div :class="act2==1?'act type_li':'type_li'" @click="change2(1)"><img v-if="act2 == 1"
							src="@assets/images/xuaz.png" alt="">按故障类型</div>
					<div :class="act2==2?'act type_li':'type_li'" @click="change2(2)"><img v-if="act2 == 2"
							src="@assets/images/xuaz.png" alt="">按部门</div>
					<div :class="act2==3?'act type_li':'type_li'" @click="change2(3)"><img v-if="act2 == 3"
							src="@assets/images/xuaz.png" alt="">按值班</div>
					<div :class="act2==4?'act type_li':'type_li'" @click="change2(4)"><img v-if="act2 == 4"
							src="@assets/images/xuaz.png" alt="">按网段</div>
				</div>

				<img src="@assets/images/nex.png" class="next" alt="">

				<div class="curss" v-if="act2 == 1">故障类型负责人</div>
				<div class="curss" v-if="act2 == 2">部门负责人</div>
				<div class="curss" v-if="act2 == 3">值班工程师</div>
				<div class="curss" v-if="act2 == 4">网段负责人</div>
			</div>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "automatic",
		data() {
			return {
				options: ['工作时间', '非工作时间'],
				value: 0,
				show: false,
				act: 1,
				act2: 1,
				showloading: false,
				cvalue: false,
				cvalue2: false
			};
		},
		mounted() {
			this.gettype()
			this.gettype2()
			this.getauto()
			this.getauto2()
		},
		methods: {
			changeauto2(e) {
				if (this.$permissions.indexOf(41) == -1) {
					this.$Toast('暂无权限');
					return
				}
				console.log(e)
				// return
				var param = {
					auto: e
				}
				var that = this
				this.$http.post(this.$url + '/main/changeAutoOutTime', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.cvalue2 = e
						that.getauto2()

					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			changeauto(e) {
				if (this.$permissions.indexOf(41) == -1) {
					this.$Toast('暂无权限');
					return
				}
				console.log(e)
				// return
				var param = {
					auto: e
				}
				var that = this
				this.$http.post(this.$url + '/main/changeAuto', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.cvalue = e
						that.getauto()
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			settype2() {

				var param = {
					outTimeChooseChange: this.act2
				}
				var that = this
				this.$http.post(this.$url + '/main/changeOutTimeChoose', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);

					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			settype() {
				var param = {
					change: this.act
				}
				var that = this
				this.$http.post(this.$url + '/main/changeChoose', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);

					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			// 查询是否开启自动派单
			getauto() {
				this.showloading = true

				var that = this
				this.$http.get(this.$url + '/main/isAuto')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.cvalue = response.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			getauto2() {
				this.showloading = true

				var that = this
				this.$http.get(this.$url + '/main/isAutoOutTime')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.cvalue2 = response.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			// 获取状态
			gettype() {
				this.showloading = true

				var that = this
				this.$http.get(this.$url + '/main/getChoose')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.act = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			gettype2() {
				this.showloading = true

				var that = this
				this.$http.get(this.$url + '/main/getOutOfTimeChoose')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.act2 = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			change2(i) {
				if (this.act2 == i) {
					if (this.act2 == 1) {
						this.$router.push('/faultType')
					} else if (this.act2 == 2) {
						this.$router.push('/department')
					} else if (this.act2 == 3) {
						this.$router.push('/watchmanScheduling')
					}else if (this.act2 == 4) {
						this.$router.push('/ipset')
					}
				} else {
					if (this.$permissions.indexOf(41) == -1) {
						this.$Toast('暂无权限');
						return
					}
					this.act2 = i
					this.settype2()
				}
			},
			change(i) {
				if (this.act == i) {
					if (this.act == 1) {
						this.$router.push('/faultType')
					} else if (this.act == 2){
						this.$router.push('/department')
					}else {
						this.$router.push('/ipset')
					}
				} else {
					if (this.$permissions.indexOf(41) == -1) {
						this.$Toast('暂无权限');
						return
					}
					this.act = i
					this.settype()
				}
			}
		}
	}
</script>

<style scoped>
	.curss {
		width: 167px;
		height: 167px;
		background: #E3EDFE;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 18px;
		color: #4286F5;
	}

	.el-checkbox:last-of-type {
		margin-bottom: 0;
		margin-right: 10px;
	}

	.act {
		color: #E3EDFE !important;
		background: #4286F5 !important;
	}

	.type_li img {
		margin-right: 13px;
	}

	.type_li {
		width: 164px;
		height: 77px;
		background: linear-gradient(0deg, #E3EDFE, #FFFFFF);
		border: 1px solid #92B9F9;
		box-shadow: 0px 0px 10px 0px rgba(66, 134, 245, 0.48);
		border-radius: 6px;
		margin-bottom: 37px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: #4286F5;
		cursor: pointer;
	}

	.type_li:nth-last-of-type(1) {
		margin-bottom: 0;
	}

	.auto_center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.option_li {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #f2f2f2;
		cursor: pointer;
	}

	.options_box {
		width: 100%;
		text-align: center;
		font-size: 16px;
		box-shadow: 0px 0px 15px 1px rgb(0 0 0 / 10%);
		padding: 0 10px;
		position: absolute;
		left: 0;
	}

	.select_box img {
		margin-left: 19px;
	}

	.next {
		margin: 0 50px;
	}

	.select_show {
		height: 100%;
		cursor: pointer;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select_box {
		border: none;
		min-width: 164px;
		padding: 0 20px;
		height: 77px;
		background: #E3EDFE;
		border-radius: 6px;
		color: #4286F5;
		text-align: center;
		font-size: 18px;

		margin-left: 0;
	}

	.auto_main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}
</style>
